<template>
  <div class="recommend-container">
    <!-- 顶部图片区域 -->
    <!-- 修改模板部分，移除 img 标签 -->
    <div class="header-image">  </div>

    <!-- 推荐问题列表 -->
    <!-- div 默认布局是 块级布局 (block), 即 默认 display 值是 block 而不是 flex -->
    <div class="question-wrapper">
      <div class="question-list">
        <div 
          v-for="(question, index) in questions" 
          :key="index" 
          class="question-item"
          @click="handleQuestionClick(question)">
          {{ question.title }}
          <span class="arrow">></span>
        </div>
        <div class="question-item refresh" @click="fetchQuestions">
          换一换
        </div>
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

interface Question {
  title: string;
  id: number;
}

const questions = ref<Question[]>([])

// 获取推荐问题
const fetchQuestions = async () => {
  try {
    // const response = await fetch('/api/portal/petroleumStar/recommendQuestions')
    // const data = await response.json()

    // 添加测试数据
    questions.value = [
      { id: 1, title: '炼油化工项目自我后评价报告编写内容是什么?' },
      { id: 2, title: '腐蚀的定义是什么?' },
      { id: 3, title: '均匀腐蚀危害及控制措施有哪些?' }
    ]

    // questions.value = data.data || []
  } catch (error) {
    console.error('获取推荐问题失败:', error)
  }
}

// 点击问题的处理函数
const emit = defineEmits(['select-question'])
const handleQuestionClick = (question: Question) => {
  emit('select-question', question.title)
}

onMounted(() => {
  fetchQuestions()
})
</script>

<style lang="scss" scoped>
.recommend-container {
  padding: 20px;
  position: relative;
}

.header-image {
  position: relative;
  background: url('../assets/bg_assistant_top.png') no-repeat center center;
  background-size: cover;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: -30px; // 让下面的半透明背景覆盖这里
  min-height: 120px;
}

.question-wrapper {
  position: relative;
  background: rgba(255, 255, 255, 0.8); // 半透明白色背景
  border-radius: 12px;
  padding: 20px;
  
  .question-list {
    background: #fff; // 纯白色背景
    border-radius: 8px;
    overflow: hidden; // 确保内部圆角效果
    
    // 其他 question-list 样式保持不变
  }
}

.question-list {
  .question-item {
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #333;
    transition: background-color 0.2s;

    &:hover {
      background-color: #f5f5f5;
    }

    .arrow {
      color: #999;
    }

    &.refresh {
      color: #666;
      justify-content: center;
      border-bottom: none;
    }
  }
}
</style>